<!-- 文章列表 -->
<template>
  <el-row class="sharelistBox">
    <div v-if="this.categoryName!=''" class="shareTitle">
      <div class="ui label" >
        <a href="javascript:void(0)">{{categoryName}}</a>
      </div>
      <ul class="shareclassTwo" >
        <li>
          <div @click="changeCategory(-1)">
<!--          <router-link :to="{path:'/home',query:{categoryId:-1}}">-->
            <a href="javascript:void(0)" :class="'active'">全部</a>
<!--          </router-link>-->
          </div>
        </li>
        <li v-for="(citem,index) in categoryList">
          <div @click="changeCategory(citem.id)">
            <a href="javascript:void(0)" :class="citem.id==categoryId?'':'active'">{{citem.categoryName}}</a>
          </div>
        </li>
      </ul>
    </div>
    <el-col :span="24" class="s-item tcommonBox" v-for="(item,index) in articleList" :key="'article'+index">
            <span class="s-round-date">
                <span class="month" v-html="showInitDate(item.createTime,'month')+'月'"></span>
                <span class="day" v-html="showInitDate(item.createTime,'date')"></span>
            </span>
      <header>
        <h1>
          <router-link :to="{path:'/DetailShare'}">
            <a  @click="setArticleId(item.id)" >
              {{item.title}}
            </a>
          </router-link>
        </h1>
        <h2>
          <i class="fa fa-fw fa-user"></i>发表于
          <i class="fa fa-fw fa-clock-o"></i><span v-html="showInitDate(item.createTime,'all')">{{showInitDate(item.createTime,'all')}}</span> •
          <i class="fa fa-fw fa-eye"></i>{{item.browseCount}} 次围观 •
          <i class="fa fa-fw fa-comments"></i>活捉 {{item.commentCount}} 条 •
          <span class="rateBox">
                        <i class="fa fa-fw fa-heart"></i>{{item.likeCount?item.likeCount:0}}点赞 •
                        <i class="fa fa-fw fa-star"></i>{{item.collectCount?item.collectCount:0}}收藏
                    </span>
        </h2>
        <div class="ui label" @click="changeCategory(item.classId)">
          <a href="javascript:void(0)">{{item.categoryName}}</a>
        </div>
      </header>
      <div class="article-content">
        <p style="text-indent:2em;">
          {{item.description}}
        </p>
        <br/>
        <p  style="max-height:300px;overflow:hidden;text-align:center;">
          <img :src="item.image" alt="" class="maxW">
        </p>
      </div>
      <div class="viewdetail">
        <router-link :to="{path:'/DetailShare'}">
          <a class="tcolors-bg"  @click="setArticleId(item.id)" target="_blank">
            阅读全文>>
          </a>
        </router-link>
      </div>
    </el-col>
    <el-col class="viewmore">
      <a v-show="hasMore" class="tcolors-bg" href="javascript:void(0);" @click="addMoreFun">点击加载更多</a>
      <a v-show="!hasMore" class="tcolors-bg" href="javascript:void(0);">暂无更多数据</a>
    </el-col>
  </el-row>
</template>

<script>
  import {initDate} from '../utils/server.js'
  import {getArticleListByCategoryId} from '../api/article'
  import {getAllCategory} from '../api/category'
  export default {
    name:'Share',
    data() { //选项 / 数据
      return {
        currPage:1, //当前查看的页数
        pageSize:2, //每页显示数量
        categoryId: this.$store.getters.categoryId, //当前查看博客的种类   -1为查询全部
        categoryName:'',//当前查看博客的种类
        categoryList:[], //所有分类
        hasMore:true, //是否能加载更多
        articleList:[], //文章列表
      }
    },

    methods: { //事件处理器
      changeCategory: function (categoryId){
        this.categoryId = categoryId;
        this.currPage = 1 ;
        this.hasMore = true;
        this.initAllCategory(categoryId);
        this.showSearchShowList(true);
      },
      initAllCategory(categoryId){
        let that = this
        getAllCategory().then(response => {
            let list = response.data
            that.categoryList = list//个人标签不多 懒得改了 直接循环取名
          try {
            list.forEach((item)=>{
              if(item.id === categoryId){
                that.categoryName = item.categoryName
                throw Error("find")
              }else {
                that.categoryName = ''
              }
            })
          }catch (e) {
              console.log("find")
          }
        })
      },
      showInitDate: function(oldDate,full){
        return initDate(oldDate,full)
      },
      showSearchShowList:function(isInit){//展示数据
        let that = this;
        getArticleListByCategoryId(this.currPage,this.pageSize,this.categoryId).then(response =>{
          if(response.data.length === 0){
            that.hasMore =false;
          }
          if(isInit){
            that.articleList = response.data
          }else{
            response.data.forEach(function (item) {
              that.articleList.push(item)
            })
          }
          that.currPage +=1
        })
        // TODO cancle
      },
      addMoreFun:function(){//查看更多
        this.showSearchShowList(false);
      },
      setArticleId:function (articleId) {
        // this.$store.state.articleId = articleId  //异步
        this.$store.commit('setArticleId',articleId) //同步
      }
    },
    watch:{
      '$store.state.categoryId': function () {
        this.changeCategory(this.$store.getters.categoryId)
      }
    },

    created() { //生命周期函数
      this.showSearchShowList(true);
    },
    mounted() {

    }
  }
</script>

<style>
  /*分享标题*/
  .shareTitle{
    margin-bottom: 40px;
    position: relative;
    border-radius: 5px;
    background: #fff;
    padding:15px;
  }
  .shareclassTwo{
    width:100%;
  }
  .shareclassTwo li{
    display: inline-block;
  }
  .shareclassTwo li a{
    display: inline-block;
    padding:3px 7px;
    margin:5px 10px;
    color:#fff;
    border-radius: 4px;
    background: #64609E;
    border: 1px solid #64609E;
    transition: transform 0.2s linear;
    -webkit-transition: transform 0.2s linear;
  }
  .shareclassTwo li a:hover{
    transform: translate(0,-3px);
    -webkit-transform: translate(0,-3px);
  }
  .shareclassTwo li a.active{
    background: #fff;
    color:#64609E;

  }
  /*文章列表*/
  .sharelistBox{
    transition: all 0.5s ease-out;
    font-size: 15px;
  }


  /*.sharelistBox .viewmore a:hover,.s-item .viewdetail a:hover{
      background: #48456C;
  }*/
</style>
